<template>
    <div>

      <jm-head></jm-head>

      <section class="center">
        <section class="nav" @click="freshen">
          <section class="nav-item"
                   @click="selected = 1">
            <span :class="{'is-selected': selected === 1}">消息</span>
          </section>
          <section class="nav-item"
                   @click="selected = 2">
            <span :class="{'is-selected': selected === 2}">申请</span>
          </section>
        </section>

        <ul class="post_list_ul" v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10">
          <li class="post_list_li" v-for="item in dataList" :key="item.id">
            <section class="li_header">
              <section class="li_header_left">
                <img :src="$store.state.baseImgUrl+item.applicatorAvatar" alt="" class="avatar" v-show="selected === 2">
                <img :src="$store.state.baseImgUrl+item.notifyAvatar" alt="" class="avatar" v-show="selected === 1">
              </section>
              <section class="li_header_center">
                <span class="nick"  v-show="selected === 2">{{item.applicatorNick}}</span>
                <span class="nick"  v-show="selected === 1">{{item.notifyNick}}</span>
              </section>
              <section class="li_header_right">
                <span class="datetime">{{item.createTime | time}}</span>
              </section>
            </section>

            <section class="li_center">
              <section  class="li_center_container">
                <span class="container">
                  <p v-show="selected === 2">
                    <span>"{{item.applicatorNick}}"</span>申请加入<span>"{{item.roomName}}"</span>
                  </p>
                  <p><p v-show="selected === 2"><span>验证信息为：</span></p><p>{{item.content}}</p></p>
                </span>
              </section>
            </section>

            <section class="li_footer" v-show="selected === 2">
              <section class="li_footer_item">
                <button class="btn" @click="agree(item)" v-show="item.type === 0">同意</button>
                <button class="btn" @click="refuse(item)" v-show="item.type === 0">拒绝</button>

                <button class="btn btn_active" v-show="item.type === 1">同意</button>
                <button class="btn btn_active" v-show="item.type === -1">拒绝</button>
              </section>
            </section>
          </li>

        </ul>
        <p class="load_content" v-show="!startShowLoading && showLoading">
          <spinner class="load_icon" type="snake"></spinner>
        </p>

      </section>

      <modal
        class="modal"
        :show="showAgreeModal"
        :duration="301"
        @hide="showAgreeModal = false">
        <p class="modal-header">
          <i class="icon_style iconfont icon-tishi">提示</i>
        </p>
        <div class="modal-center">
          <p>您确定同意"{{this.application.applicatorNick}}"加入该空间吗？</p>
        </div>
        <div class="modal-footer">
          <button class="modal-btn modal-ok" @click="confirmAgree">确定</button>
          <button class="modal-btn modal-cancel" @click="cancel">不了</button>
        </div>
      </modal>

      <modal
        class="modal"
        :show="showRefuseModal"
        :duration="301"
        @hide="showRefuseModal = false">
        <p class="modal-header">
          <i class="icon_style iconfont icon-tishi">提示</i>
        </p>
        <div class="modal-center">
          <p>您确定拒绝"{{this.application.applicatorNick}}"加入该空间吗？</p>
        </div>
        <div class="modal-footer">
          <button class="modal-btn modal-ok" @click="confirmRefuse">确定</button>
          <button class="modal-btn modal-cancel" @click="cancel">不了</button>
        </div>
      </modal>

      <jm-footer></jm-footer>

      <transition name="loading">
        <spinner class="load_icon" type="snake" v-show="startShowLoading"></spinner>
      </transition>
      <transition name="router-slid" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
</template>

<script>
  import JmHead from '../../components/header/Head';
  import JmFooter from '../../components/footer/Footer';
  import { Spinner,Toast } from 'mint-ui'
  import Modal from "../../components/common/modal.vue";
    export default {
      data () {
        return {
          selected: 1,
          oldSelected: 1,
          showLoading: true,
          startShowLoading: true,
          loading: false,
          applicationOffset: 0,
          applicationList: [],
          notifiedIdOffset: 0,
          notifiedIdList: [],
          showAgreeModal: false,
          showRefuseModal: false,
          dataList: [],
          application: "",
        }
      },
      methods: {
        freshen(){
          if (this.oldSelected !== this.selected){
            this.loadMore();
            this.oldSelected = this.selected;
          }
        },

        async loadMore(){
          console.log("load....");
          if (this.selected === 1){
            this.dataList = this.notifiedIdList;
          }else if(this.selected === 2){
            this.dataList = this.applicationList;
          }
          this.loading = true;

          //获取信息
          let res = null;

          if (this.selected === 1){
            let url = '/v1/notification?notifiedId=' + this.$store.state.userInfo.userId
                      + '&start=' + this.notifiedIdOffset
                      + '&length=' + this.$store.state.length

            await this.axios.get(url)
              .then(response => {
                res = response.data;
              })
          }else if (this.selected === 2){
            let url = '/v1/application_info?&roomCreator=' + this.$store.state.userInfo.userId
                    + '&start=' + this.applicationOffset
                    + '&length=' + this.$store.state.length

            await this.axios.get(url)
              .then(response => {
                res = response.data;
              })
          }

//        console.log(this.result);
          if (res.success){
            this.startShowLoading = false;
          }else{
            let instance = Toast({message: '网络连接失败', className: 'toast'});
            setTimeout(() => {
              instance.close();
              return;
            }, 2000);
          }
          if (this.selected === 1){
            this.notifiedIdOffset += res.result.length;
            this.notifiedIdList = [...this.notifiedIdList, ...res.result];
            this.dataList = this.notifiedIdList;
          } else if (this.selected === 2){
            this.applicationOffset += res.result.length;
            this.applicationList = [...this.applicationList, ...res.result];
            this.dataList = this.applicationList;
          }
          if (res.result.length > 0){
            this.loading = false;
          }


          if (res.result.length < this.$store.state.length) {
            this.showLoading = false;
            return;
          }
        },

        agree(item){
            this.application = item;
            this.showAgreeModal = true;
        },

        refuse(item){
          this.application = item;
          this.showRefuseModal = true;
        },

        async confirmAgree(){
          let res;
          let url = '/v1/application_info'
          let param = {
            id: this.application.id,
            applicatorId: this.application.applicatorId,
            applicatorNick: this.application.applicatorNick,
            content: this.application.content,
            roomId: this.application.roomId,
            roomName: this.application.roomName,
            roomCreator: this.application.roomCreator,
            status: 1,
            type: 1,
          }
          await this.axios.put(url, param)
            .then(response => {
              res = response.data;
            })
          if (res.success) {
            let instance = Toast({message: '同意成功', className: 'toast'});
            setTimeout(() => {
              instance.close();
            }, 2000);
          }

          let i = 0;
          let flag = false;
          for (; i < this.dataList.length && i < this.applicationList.length; i ++){
              if (this.dataList[i].id === this.application.id){
                  this.dataList[i].type = 1;
                  if (flag){
                      break;
                  }else{
                      flag = true;
                  }
              }
              if (this.applicationList[i].id === this.application.id){
                this.applicationList[i].type = 1;
                  if (flag){
                      break;
                  }else{
                      flag = true;
                  }
              }
          }

          this.application = "";
          this.showAgreeModal = false;
        },

        async confirmRefuse(){
          let res;
          let url = '/v1/application_info'
          let param = {
            id: this.application.id,
            applicatorId: this.application.applicatorId,
            applicatorNick: this.application.applicatorNick,
            content: this.application.content,
            roomId: this.application.roomId,
            roomName: this.application.roomName,
            roomCreator: this.application.roomCreator,
            status: 1,
            type: -1,
          }
          await this.axios.put(url, param)
            .then(response => {
              res = response.data;
            })
          if (res.success) {
            let instance = Toast({message: '拒绝成功', className: 'toast'});
            setTimeout(() => {
              instance.close();
            }, 2000);
          }

          let i = 0;
          let flag = false;
          for (; i < this.dataList.length && i < this.applicationList.length; i ++){
            if (this.dataList[i].id === this.application.id){
              this.dataList[i].type = -1;
              if (flag){
                break;
              }else{
                flag = true;
              }
            }
            if (this.applicationList[i].id === this.application.id){
              this.applicationList[i].type = -1;
              if (flag){
                break;
              }else{
                flag = true;
              }
            }
          }
          this.application = "";
          this.showRefuseModal = false;
        },

        cancel(){
          this.showAgreeModal = false;
          this.showRefuseModal = false;
        }

      },
      components:{
        Modal,
        Spinner,
        JmHead,
        JmFooter
      }
    }
</script>


<style lang="scss">
  .mint-toast-text{
    font-size: 0.6rem;
  }
  .toast{
    min-width: 20%;
    width: 20%;
    span{
      color: #FFFFFF;
    }
  }
  .mint-spinner-snake{
    margin: 0 auto;
  }
</style>

<style lang="scss" scoped>
  @import '../../style/mixin';

  .load_icon{
    display: inline-block;
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;

  }

  .modal{
    .modal-header{
      text-align: center;
      margin: 0.2rem auto;
      .icon_style{
        color: #33CCFF;
      }
      border-bottom: solid 1px #666;
    }
    .modal-center{
      text-align:center;
      .modal-message{
        display: block;
        border-top: solid 1px #666;
        border-bottom: solid 1px #666;
        width: 100%;
        resize: none;
        margin: 0 auto;
        margin-top: 0.6rem;
        font-size: 0.6rem;
        text-indent: 0.5rem;
      }
    }
    .modal-footer{
      display: block;
      width: 100%;
      text-align: center;
      flex-direction: column;
      align-items: center;

      .modal-btn{
        display: block;
        background-color: transparent;
        width: 80%;
        height: 1rem;
        @include borderRadius(0.5rem);
        font-size: 0.6rem;
        margin: 0.4rem auto;
      }
      .modal-ok{
        border:solid 1px #33CCFF;
        color: #33CCFF;
      }
      .modal-cancel{
        border:solid 1px #666;
      }
    }
  }

  .spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
  .spin-col{
    height: 100%;
    width: 100%;
    position: relative;
    margin: 5px auto;

  }

  .load_content{
    height: 45px;
    width: 100%;
  }

  .center{
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    overflow: hidden;
  }

  .nav{
    background-color: #eaeaea;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    top: 1.5rem;
    @include wh(100%, 0.88rem);
    display: flex;
    box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);

    .nav-item{
      flex: 1;
      display: flex;
      text-align: center;
      flex-direction: column;
      align-items: center;
      @include sc(.5rem, #666);

      span{
        margin: auto auto;
      }

      .is-selected{
        color: #33CCFF;
      }
    }
  }


  .post_list_ul{
    padding-top: 0.88rem;

    .post_list_li{
      border: solid 1px #d7dde4;
      @include borderRadius(0.1rem);
      border-bottom: solid 10px #eaeaea;


      /*单个文章节点头部 开始*/
      .li_header{
        @include wh(100%, 1.6rem);
        border-bottom: solid 1px #e3e8ee;
        display: flex;

        .li_header_left{
          display: inline-block;
          margin: 0.1rem 0.5rem;

          .avatar{
            @include wh(1.3rem, 1.3rem);
            @include borderRadius(0.65rem);
          }
        }

        .li_header_center{
          flex-direction: column;
          align-items: center;
          display: inline-block;
          margin: auto 0.2rem;
          .nick{
            margin: auto 0;
            font-size: 0.6rem;
            font-weight: bold;
          }

        }

        .li_header_right{
          flex-direction: column;
          align-items: center;
          display: inline-block;
          margin: auto 0.2rem;

          .datetime{
            margin: auto 0;
            font-size: 0.4rem;
            font-weight: bold;
          }
        }
      }


      /* 单个节点中部，内容部分  开始*/
      .li_center{
        padding: 0.2rem 0.5rem;

        .li_center_container{
          background-color: #FFFFFF;
          @include borderRadius(10px);
          padding: 0.3rem;

          .container{
            font-size: 0.6rem;
            p{
              margin-left: 0.5rem;
            }

          }

        }
      }

      /* 单个节点尾部  开始*/
      .li_footer{
        border-top: solid 1px #e3e8ee;
        padding-left: 0.5rem;
        display: flex;
        .li_footer_item{
          margin: auto auto;
          .btn{
            font-size: 0.4rem;
            width: 3.5rem;
            margin-left: 0.3rem;
            height: 1rem;
            color: #FFFFFF;
            background-color: #33CCFF;
            @include borderRadius(1.75rem)
          }
          .btn_active{
            width: 3.5rem;
            margin-left: 0.3rem;
            height: 1rem;
            color: #FFFFFF;
            background-color: #bbbbbb;
            @include borderRadius(1.75rem)
          }
        }

      }
    }
  }

  span,input{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  }
</style>
